@font-face {
  font-family: 'Cn Font';
  src: url('@assets/fonts/SourceHanSerifCN.otf.woff2') format('woff');
}

@font-face {
  font-family: 'En Font';
  src: url('@assets/fonts/FiraCode.ttf') format('ttf');
}

:root {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
}

div.uxy-chromium-plugin-popup {
  display: flex;
  flex-flow: row nowrap;
  justify-content: stretch;
  align-items: stretch;
}

div.uxy-chromium-plugin-popup > div.content {
  flex-grow: 1;
}

div.uxy-chromium-plugin-popup > div.profile {
  width: 100px;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-content: flex-start;
}

div.uxy-chromium-plugin-popup > div.profile.collapsed {
  width: 20px;
}

div.uxy-chromium-plugin-popup > div.profile > div.avatar {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;

  img {
    width: 50%;
    height: 50%;
    border-radius: 25%;
  }

  svg {
    width: 50%;
    height: 50%;
    border-radius: 25%;
  }
}

div.uxy-chromium-plugin-popup > div.profile > div.name {
  font-family: 'En Font', 'Cn Font', sans-serif;
}

div.uxy-chromium-plugin-popup > div.profile > div.age {
  font-family: 'En Font', sans-serif;
}
